<template>
  <!--
    时间： 2024年9月24日 16点34分
    这里使用Cesium
  -->
  <div id="cesium-box" class="cesium-box">

  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import {onMounted} from "vue";
import proj4 from "proj4";

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMjVkNTU5MC1lMjA5LTRjOGEtYmZhNy04ZjVmYWZmZTZjYzAiLCJpZCI6MjQwNDczLCJpYXQiOjE3MjU5NzkwNzR9.dAaOmktlKyjyDgy41GJc8_dFlOpYq2HUhHTJLrsHSCM";

onMounted(() => {
  Cesium.Ion.defaultAccessToken = token;
  // initMapByWMS();
  initMapByWMTS();
});

function initMapByWMS() {
  const viewer = new Cesium.Viewer('cesium-box', {
    infoBox: false,
    // baseLayerPicker: false, // 关闭底图选择器
    imageryProvider: false, // 禁用默认底图加载
  });

  // CGCS2000 (EPSG:4547) 转换到 WGS84 (EPSG:4326)
  const sourceProj = 'EPSG:4547';
  const destProj = 'EPSG:4326';

  // 使用proj4定义EPSG:4547坐标系（CGCS2000）
  proj4.defs("EPSG:4547", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=0 +y_0=0 +ellps=GRS80 +units=m +no_defs");
  // 原始BBOX（EPSG:4547平面坐标）
  const bbox4547 = [353598.32227930747,3006258.1767470683,480871.4206368345,3106334.1560291206];
  // 将BBOX转换为WGS84坐标（经纬度）
  const bottomLeft = proj4(sourceProj, destProj, [bbox4547[0], bbox4547[1]]);
  const topRight = proj4(sourceProj, destProj, [bbox4547[2], bbox4547[3]]);

  // 使用转换后的经纬度坐标
  const rectangle = Cesium.Rectangle.fromDegrees(
    bottomLeft[0], bottomLeft[1],
    topRight[0], topRight[1]
  );

  const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    // url: "http://localhost:8080/geoserver/wms",//服务地址
    url: "http://192.168.1.137:8080/geoserver/zz_map/wms",//服务地址
    layers: "Cesium:dida",
    //视图名称
    // layers: "zz_map:WSPoint",
    parameters: {
      service: 'WMS',
      version: '1.1.1',
      request: 'GetMap',
      //这里不进行透明度设置
      TRANSPARENT: false,
      format: "image/png",
      // srs: "EPSG:4547",// 改为 EPSG:3857 或 EPSG:4547 (米单位的坐标系)
      srs: "EPSG:4326",//4326表示使用的是经纬度,中国大地坐标系
      //EPSG:4547则表示使用的是米
      LAYERS: "zz_map:zz-map",
      // LAYERS: "zz_map:WSPoint",
      exceptions: 'application/vnd.ogc.se_inimage',
      // bbox: "391682.9945162758,3000765.1170523725,442380.36456672556,3118040.9610244976", // 这里使用以米为单位的bbox
      // bbox: bbox4547.join(","), // 这里使用以米为单位的bbox
    },
    // rectangle: new Cesium.Rectangle.fromDegrees(391835.69, 2997711.05, 442533.06, 3114986.90)
    // rectangle: rectangle
  });

  //添加图层
  viewer.imageryLayers.addImageryProvider(wmsImageryProvider);
  viewer.camera.setView({
    destination: rectangle,
  });

}

function initMapByWMTS() {
  const viewer = new Cesium.Viewer('cesium-box');

  // CGCS2000 (EPSG:4547) 转换到 WGS84 (EPSG:4326)
  // const sourceProj = 'EPSG:4547';
  // const destProj = 'EPSG:4326';
  // const bbox4547 = [476089.53456261946, 3054745.599922355, 523351.0888716983, 3113383.521908417];
  // // 将BBOX转换为WGS2000坐标（经纬度）
  // const bottomLeft = proj4(sourceProj, destProj, [bbox4547[0], bbox4547[1]]);
  // const topRight = proj4(sourceProj, destProj, [bbox4547[2], bbox4547[3]]);
  // // 使用转换后的经纬度坐标
  // const rectangle = Cesium.Rectangle.fromDegrees(
  //   bottomLeft[0], bottomLeft[1],
  //   topRight[0], topRight[1]
  // );
  // console.log(97, rectangle);


  const resolutions = [156367.79197931694, 78183.89598965847, 39091.947994829236, 19545.973997414672, 9772.986998707349, 4886.493499353674, 2443.246749676835, 1221.623374838416, 610.8116874192093, 305.40584370960335, 152.7029218548022, 76.3514609274011, 38.17573046370042, 19.087865231850262, 9.543932615925145, 4.771966307962573, 2.3859831539812832, 1.1929915769906416, 0.5964957884953221, 0.29824789424766107, 0.14912394712383054];
  const matrixIds = [];
  const gridsetName = "EPSG:4547_zz_image";
  const layerName = "zz_image";
  for (let i = 0; i < resolutions.length; i++) {
    matrixIds.push(`${gridsetName}:${i}`)
  }



// 添加 WMTS 图层
  const wmtsLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // url: 'http://192.168.1.137:8080/geoserver/gwc/demo/zz_image?gridSet=EPSG:4547_zz_image&format=image/png', // 替换为实际的 WMTS 服务 URL
    // layer: layerName, // 图层名
    // style: '', // 样式，留空表示使用默认样式
    // format: 'image/png', // 瓦片格式
    // tileMatrixSetID: 'EPSG:4547', // 瓦片矩阵集
    // minimumLevel: 0, // 最小缩放级别
    // maximumLevel: 20, // 最大缩放级别
    url: 'http://192.168.1.137:8080/geoserver/gwc/demo/zz_image',
    layer: layerName,
    style: '',
    format: 'image/png',
    tileMatrixSetID: gridsetName,
    tileMatrixLabels: matrixIds,
    minimumLevel: 0, // 最小缩放级别
    maximumLevel: 20,// 最大缩放级别
    // credit : new Cesium.Credit('U. S. Geological Survey')
  }));

// 设置视图中心
  viewer.camera.setView({
    // destination: rectangle // 设置为所需经纬度和高度
  });
}


</script>
<style scoped>
.cesium-box {
  width: 100vw;
  height: 100vh;
  background: #ffffff;
}
</style>
